import { useState, useRef } from 'react';
import { Select, Input } from 'antd';
import type { GetProps } from 'antd';
import Navigation from '../../components/Navigation/index.tsx';
import Rightnav from '../../components/rightnav/rightnav.tsx';
import PaginationComponent from '../../components/Pagination.tsx';
import { adscenedata, vapurposedata, vaindustrydata, initialOptions, alladData } from './videoaudio.ts';
import './videoaudio.css';

type SearchProps = GetProps<typeof Input.Search>;
const { Search } = Input;

const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);

const Advertisement = () => {
    const [highlightedIndex, setHighlightedIndex] = useState(0);
    const [highlightedIndex2, setHighlightedIndex2] = useState(0);
    const [highlightedIndex4, setHighlightedIndex4] = useState(0);
    const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
    const [playingIndex, setPlayingIndex] = useState<number | null>(null);
    
    const [selectedScene, setSelectedScene] = useState<string | null>(null);
    const [selectedPlateType, setSelectedPlateType] = useState<string | null>(null);
    const [selectedIndustry, setSelectedIndustry] = useState<string | null>(null);
    
    const handleMouseEnterva = (index: number) => {
        setPlayingIndex(index);
        videoRefs.current[index]?.play();
    };

    const handleMouseLeaveva = (index: number) => {
        setPlayingIndex(null);
        videoRefs.current[index]?.pause();
    };

    const [activeIndex, setActiveIndex] = useState(0);
    const tabs = ['视频', '音效', '配乐'];

    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };

    const handleMouseEnter = (index: any) => {
        if (highlightedIndex === null) setHighlightedIndex(index);
    };

    const handleClick = (index: any, value: any) => {
        console.log(value);
        setHighlightedIndex(index);
        setSelectedScene(value === '全部' ? null : value);
    };

    const handleMouseEnter2 = (index: any) => {
        if (highlightedIndex2 === null) setHighlightedIndex2(index);
    };

    const handleClick2 = (index: any, value: any) => {
        console.log(value);
        setHighlightedIndex2(index);
        setSelectedPlateType(value === '全部' ? null : value);
    };

    const handleMouseEnter4 = (index: any) => {
        if (highlightedIndex4 === null) setHighlightedIndex4(index);
    };

    const handleClick4 = (index: any, value: any) => {
        console.log(value);
        setHighlightedIndex4(index);
        setSelectedIndustry(value === '全部' ? null : value);
    };

    const [options, setOptions] = useState(initialOptions);
    
    const toggleOption = (id: string) => {
        const newOptions = options.map((option: any) =>
            option.id === id ? { ...option, isSelected: !option.isSelected } : option
        );
        setOptions(newOptions);
    };

    const [currentPage, setCurrentPage] = useState(1);
    const pageSize = 20;

    const handlePageChange = (pageNumber: number) => {
        setCurrentPage(pageNumber);
    };

    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;

    // 过滤数据，根据所选条件
    const filteredData = alladData.filter(item => {
        const matchesScene = selectedScene ? item.scene === selectedScene : true;
        const matchesPlateType = selectedPlateType ? item.purpose === selectedPlateType : true;
        const matchesIndustry = selectedIndustry ? item.industry === selectedIndustry : true;
        return matchesScene && matchesPlateType && matchesIndustry;
    });

    const paginatedData = filteredData.slice(startIndex, endIndex);

    return (
        <div className='advertisement_box'>
            <div className='Navigation'>
                <Navigation />
            </div>
            <Rightnav />
            <div className="advertisement_box_nei">
                <div className='advertisement_top'>
                    <div className='advertisement_top_nei'>
                        <div className='advertisement_top_title' style={{ position: 'relative', height: '260px', overflow: 'hidden' }}>
                            <video
                                src="https://s.ibaotu.com/video/shipin.mp4"
                                autoPlay
                                loop
                                muted
                                style={{
                                    position: 'absolute',
                                    top: 0,
                                    left: 0,
                                    width: '100%',
                                    height: '100%',
                                    objectFit: 'cover'
                                }}
                            />
                            <div style={{ position: 'relative', zIndex: 1, color: 'white', textAlign: 'center', padding: '20px' }}>
                                <div className='advertisement_top_title_tabs'>
                                    {tabs.map((tab, index) => (
                                        <div
                                            key={index}
                                            onClick={() => setActiveIndex(index)}
                                            className={index === activeIndex ? 'tab active' : 'tab'}
                                        >
                                            {tab}
                                        </div>
                                    ))}
                                </div>
                                <div className='advertisement_top_title_search'>
                                    <div className='advertisement_top_title_search1'>
                                        <Select
                                            defaultValue="视频"
                                            style={{ width: 80 }}
                                            onChange={handleChange}
                                            options={[
                                                { value: '视频', label: '视频' },
                                                { value: '音效', label: '音效' },
                                                { value: '配乐', label: '配乐' },
                                            ]}
                                        />
                                    </div>
                                    <div className='advertisement_top_title_search2'>
                                        <Search
                                            placeholder="请输入"
                                            allowClear
                                            enterButton="Search"
                                            size="large"
                                            onSearch={onSearch}
                                            style={{ width: 590 }}
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className='advertisement_top_position'>
                            <div>标签:</div>
                            <div className='advertisement_top_position_ad'>广告设计</div>
                            <div>共<span className='orange'>{filteredData.length}</span>个结果</div>
                        </div>
                        <div className='advertisement_top_screen'>
                            <div className='advertisement_top_screen1'>
                                <div className='advertisement_top_screen1_left orange'>场景:</div>
                                <div className='advertisement_top_screen1_right'>
                                    {adscenedata.map((item: any, index: any) => (
                                        <div
                                            key={index}
                                            onMouseEnter={() => handleMouseEnter(index)}
                                            onClick={() => handleClick(index, item)}
                                            style={{
                                                backgroundColor: highlightedIndex === index ? 'orange' : 'transparent',
                                                color: highlightedIndex === index ? 'white' : 'black',
                                                borderRadius: '10px',
                                                transition: 'background-color 0.3s, color 0.3s',
                                                cursor: 'pointer'
                                            }}
                                        >
                                            <a>{item}</a>
                                        </div>
                                    ))}
                                </div>
                            </div>
                            <div className='advertisement_top_screen2'>
                                <div className='advertisement_top_screen2_left orange'>板式:</div>
                                <div className='advertisement_top_screen2_right'>
                                    {vapurposedata.map((item: any, index: any) => (
                                        <div
                                            key={index}
                                            onMouseEnter={() => handleMouseEnter2(index)}
                                            onClick={() => handleClick2(index, item)}
                                            style={{
                                                backgroundColor: highlightedIndex2 === index ? 'orange' : 'transparent',
                                                color: highlightedIndex2 === index ? 'white' : 'black',
                                                borderRadius: '10px',
                                                transition: 'background-color 0.3s, color 0.3s',
                                                cursor: 'pointer'
                                            }}
                                        >
                                            <a>{item}</a>
                                        </div>
                                    ))}
                                </div>
                            </div>
                            <div className='advertisement_top_screen2'>
                                <div className='advertisement_top_screen2_left orange'>行业:</div>
                                <div className='advertisement_top_screen2_right'>
                                    {vaindustrydata.map((item: any, index: any) => (
                                        <div
                                            key={index}
                                            onMouseEnter={() => handleMouseEnter4(index)}
                                            onClick={() => handleClick4(index, item)}
                                            style={{
                                                backgroundColor: highlightedIndex4 === index ? 'orange' : 'transparent',
                                                color: highlightedIndex4 === index ? 'white' : 'black',
                                                borderRadius: '10px',
                                                transition: 'background-color 0.3s, color 0.3s',
                                                cursor: 'pointer'
                                            }}
                                        >
                                            <a>{item}</a>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='advertisement_main'>
                    <div className='advertisement_main_top'>
                        <div className='advertisement_main_top_left' >
                            <Select
                                defaultValue="综合排序"
                                style={{ width: 100, marginTop: 10 }}
                                onChange={handleChange}
                                options={[
                                    { value: '综合排序', label: '综合排序' },
                                    { value: '热门下载', label: '热门下载' },
                                    { value: '最新上传', label: '最新上传' },
                                    { value: '昨日热图', label: '昨日热图' }
                                ]}
                            />
                        </div>
                        <div className='advertisement_main_top_center'>
                            <div>素材类型:</div>
                            {options.map((option: any) => (
                                <div key={option.id} style={{ marginBottom: '10px' }}>
                                    <input
                                        type="checkbox"
                                        id={`checkbox-${option.id}`}
                                        checked={option.isSelected}
                                        onChange={() => toggleOption(option.id)}
                                    />
                                    <label htmlFor={`checkbox-${option.id}`}>{option.label}</label>
                                </div>
                            ))}
                        </div>
                        <div className='advertisement_main_top_right'>
                            <Select
                                defaultValue="分辨率"
                                style={{ width: 130, marginTop: 10 }}
                                onChange={handleChange}
                                options={[
                                    { value: '不限', label: '不限' },
                                    { value: '720P', label: '720P' },
                                    { value: '1080P级以上', label: '1080P级以上' },
                                    { value: '4K级以上', label: '4K级以上' },
                                    { value: '8K级以上', label: '8K级以上' },
                                ]}
                            />
                            <Select
                                defaultValue="时长"
                                style={{ width: 100, marginTop: 10 }}
                                onChange={handleChange}
                                options={[
                                    { value: '不限', label: '不限' },
                                    { value: '15s以下', label: '15s以下' },
                                    { value: '16s-30s', label: '16s-30s' },
                                    { value: '31s-60s', label: '31s-60s' },
                                    { value: '60s以上', label: '60s以上' }
                                ]}
                            />
                        </div>
                    </div>
                    <div className='advertisement_main_center'>
                        <div className='PosterBody_list'>
                            {paginatedData.map((item: any, index: number) => (
                                <div
                                    key={index}
                                    className="video-wrapper"
                                    onMouseEnter={() => handleMouseEnterva(index)}
                                    onMouseLeave={() => handleMouseLeaveva(index)}
                                >
                                    {playingIndex === index ? (
                                        <div className="video-container">
                                            <video
                                                ref={el => (videoRefs.current[index] = el)}
                                                controls
                                                className="video"
                                            >
                                                <source src={item.video} type="video/mp4" />
                                                Your browser does not support the video tag.
                                            </video>
                                            <div className="button_overlay">
                                                <div className='button_overlay1'>版权授权</div>
                                                <div className='button_overlay2'>下载</div>
                                                <div className='button_overlay3'>收藏</div>
                                            </div>
                                        </div>
                                    ) : (
                                        <img
                                            src={item.image}
                                            alt="thumbnail"
                                            className="thumbnail"
                                        />
                                    )}
                                    {playingIndex !== index && (
                                        <div className="p_bottom_text">
                                            <div className='p_bottom_text_zb'>
                                                <span className='p_bottom_text_zb_b'>正版</span>
                                                <span className='p_bottom_text_zb_p'>1080P</span>
                                            </div>
                                            <div className='p_bottom_text_ms'>{item.name} 的视频描述</div>
                                        </div>
                                    )}
                                    <div style={{ display: "none" }}>{item.scene}{item.purpose}{item.industry}</div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
                <div className='adpage'>
                    <PaginationComponent
                        currentPage={currentPage}
                        total={filteredData.length}  // 显示过滤后的总数
                        pageSize={pageSize}
                        onPageChange={handlePageChange}
                        showSizeChanger={false}
                    />
                </div>
            </div>
        </div>
    );
};

export default Advertisement;